{include file="index/_meta" /}
    <title>余额明细</title>
</head>
<body>
<div id="app">
    <van-nav-bar
            title="余额明细"
            left-text="返回"
            left-arrow
            @click-left="window.history.back();"
    >
        <template #right>
            <b style="color: #ff8917">总计：{{String(total_inc_money*100 - total_dec_money*100)/100}}</b>
        </template>
        <template #title>
            <van-dropdown-menu>
                <van-dropdown-item  @change="typeChange" v-model="type" :options="option1" ></van-dropdown-item>
            </van-dropdown-menu>
        </template>
    </van-nav-bar>

    <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
    >
        <div v-for="(item,index) in list" :key="index">
            <van-cell :value="item.value">
                <template #title>
                    <van-button type="primary" size="mini" v-if="item.type == 'inc'">收入</van-button>
                    <van-button type="danger" size="mini" v-else>支出</van-button>
                </template>
                <template #label>
                    说明：{{item.remark}}
                </template>
            </van-cell>
        </div>
    </van-list>
</div>
<script>
    new Vue({
        el: "#app",
        data(){return{
            list:[],
            page:0,
            last_page:1,
            limit:15,
            loading:false,
            finished:false,
            total_inc_money:'0',
            total_dec_money:'0',
            type: 'all',
            option1: [
                { text: '全部', value: 'all' },
                { text: '收入', value: 'inc' },
                { text: '支出', value: 'dec' }
            ],
        }},
        created(){
        },
        methods:{
            onLoad(){
                this.page ++
                if (this.page > this.last_page || this.last_page == 0){
                    this.finished = true
                }else{
                    this.getMoneyLog()
                }
            },
            getMoneyLog(){
                let that = this
                let user = JSON.parse(localStorage.getItem('user'))
                axios.post("{:url('store/getMoneyLog')}",{
                    shop_id:"{$Think.session.wechat.shop_id}",
                    page:that.page,
                    limit:that.limit,
                    type:that.type,
                }).then(function (res) {
                    let ret = res.data
                    if (that.page == 1){
                        that.list = ret.data.data
                    }else{
                        for (var i = 0,len=ret.data.data.length;i<len;i++){
                            that.list.push(ret.data.data[i])
                        }
                    }
                    that.loading = false
                    that.last_page = ret.data.last_page
                    that.total_inc_money = ret.data.total_inc_money
                    that.total_dec_money = ret.data.total_dec_money
                })
            },
            typeChange(value){
                this.type = value
                this.page = 0
                this.last_page = 1
                this.onLoad()
            }
        },
    })
</script>
</body>
</html>
